<template>
  <div>
    <el-card id="box-card">
      <div>
        <img id="banner" :height="img.height" :src="img.src" :width="img.width" alt="">
      </div>
      <div id="del-div">
        <el-link icon="el-icon-close" type="primary" @click="close()"></el-link>
      </div>
      <el-descriptions :column="1" title=班车信息>
        <el-descriptions-item label="站点">{{ stationInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="线路">{{ stationInfo.line }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ stationInfo.type }}</el-descriptions-item>
        <el-descriptions-item label="地理信息">{{ stationInfo.geoName }}</el-descriptions-item>
        <el-descriptions-item label="到站时间">
          <el-tag size="small">{{ stationInfo.runTime }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-row>
        <el-col :span="12">
          <el-button class="btn_to" @click="goTo">去这里</el-button>
        </el-col>
        <el-col :span="12">
          <el-button class="btn_from" @click="goFrom">设为起点</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="amap-info-sharp">
      <i class="el-icon-caret-bottom"></i>
    </div>
  </div>
</template>
<script>
export default {
  props: ['isGrg', 'img', 'stationInfo'],
  data() {
    return {
      overlay: null,
      infoWindow: null,
    };
  },
  methods: {
    initialize(e) {
      this.overlay = e.overlay;
      this.infoWindow = e.infoWindow;
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
    goTo() {
      this.infoWindow.close();
      let name = this.stationInfo.name;
      let position = this.stationInfo.geoLocation;
      this.bus.$emit("goTo", {name, position});
    },
    goFrom() {
      this.infoWindow.close();
      let name = this.stationInfo.name;
      let position = this.stationInfo.geoLocation;
      this.bus.$emit("goFrom", {name, position});
    }
  }
};
</script>

<style lang="css" scoped>
.amap-info-sharp {
  bottom: -1px;
  left: 48.5%;
  position: absolute;
  color: #fff;
  z-index: -1;
}

#box-card {
  padding: 0 10px 3px 10px;
  width: 400px;
  border-radius: 10px;
}

#del-div {
  position: absolute;
  right: 20px;
  top: 20px;
  transform: scale(1.2);
}

.btn_to {
  margin-left: 20%;
}

.btn_from {
  margin-right: 80%;
}
</style>
